<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发票系统</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            height: 100%;
        }
        #sidebar {
            width: 250px;
            height: 100vh;
            background-color: #4A4A4A;
            color: white;
            position: fixed;
            left: -250px;
            transition: left 0.3s;
            overflow: auto;
        }
        #sidebar.active {
            left: 0;
        }

        #sidebar ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        #sidebar ul li a {
            display: block;
            padding: 80px;
            color: white;
            text-decoration: none;
            border-bottom: 1px solid #5A5A5A;
        }

        #sidebar ul li a:hover {
            background-color: #5A5A5A;
        }

        #content {
            margin-left: 0;
            transition: margin-left 0.3s;
            padding: 20px;
        }

        #content.with-sidebar {
            margin-left: 250px;
        }

        #hamburger {
            position: fixed;
            bottom: 10px;
            left: 10px;
            z-index: 1000;
            font-size: 24px;
            background: #4A4A4A;
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            border-radius: 50%;
        }


        h1 {
            font-size: 3em;
            color: #005792;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            margin: 0;
            padding: 20px;
            background: linear-gradient(120deg, #a1c4fd, #c2e9fb);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: shine 2s infinite;
        }
    </style>
    <style>
        /* 表格通用样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background-color: #f9f9f9;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            border-radius: 8px; /* 圆角 */
        }

        th, td {
            padding: 15px;
            text-align: left;
            border: 1px solid #ddd;
            transition: background-color 0.3s;
        }

        th {
            background-color: #f2f2f2;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
            position: relative;
        }

        th:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: #005792;
        }

        td {
            background-color: #fff;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tr:hover {
            background-color: #eaeaea;
        }

        /* 挂号记录表格特定样式 */
        #BillRecords {
            font-size: 14px; /* 字体大小 */
        }

        #BillRecords th {
            width: auto; /* 自动宽度 */
        }

        #BillRecords td {
            white-space: nowrap; /* 防止单元格内容换行 */
        }

        /* 按钮样式 */
        button {
            background-color: #4A4A4A; /* 按钮背景色 */
            color: white; /* 文字颜色 */
            border: none; /* 无边框 */
            padding: 10px 20px; /* 内边距 */
            margin: 10px 0; /* 外边距 */
            cursor: pointer; /* 鼠标手形 */
            border-radius: 5px; /* 圆角 */
            font-size: 16px; /* 字体大小 */
        }

        button:hover {
            background-color: #5A5A5A; /* 鼠标悬停时的背景色 */
        }
    </style>
    <style>
        #registration {
            background-color: #f9f9f9; /* 表单背景色 */
            padding: 20px; /* 内边距 */
            border-radius: 8px; /* 圆角 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 阴影 */
            margin-top: 20px; /* 上边距 */
        }

        #registration label {
            display: block; /* 块级显示，便于设置上下边距 */
            margin-bottom: 5px; /* 下边距 */
            color: #333; /* 文字颜色 */
            font-weight: bold; /* 字体加粗 */
        }

        #registration select,
        #registration textarea {
            width: 100%; /* 宽度100%，填满容器 */
            padding: 10px; /* 内边距 */
            border-radius: 4px; /* 圆角 */
            border: 1px solid #ddd; /* 边框 */
            box-sizing: border-box; /* 盒模型 */
            margin-bottom: 20px; /* 下边距 */
        }

        #registration textarea {
            resize: vertical; /* 允许垂直调整大小 */
        }

        #registration button {
            background-color: #4A4A4A; /* 按钮背景色 */
            color: white; /* 文字颜色 */
            padding: 10px 20px; /* 内边距 */
            border: none; /* 无边框 */
            border-radius: 5px; /* 圆角 */
            cursor: pointer; /* 鼠标手形 */
            font-size: 16px; /* 字体大小 */
            transition: background-color 0.3s; /* 过渡效果 */
        }

        #registration button:hover {
            background-color: #5A5A5A; /* 鼠标悬停时的背景色 */
        }

        /* 添加一些间距和对齐 */
        #registration ::placeholder {
            color: #aaa; /* 占位符文字颜色 */
        }
    </style>
    <!-- 退出按钮 -->
    <style>
        #logoutButton {
            position: fixed;
            bottom: 10px;
            right: 10px;
            padding: 10px 20px;
            background-color: #e74c3c; /* 红色背景 */
            color: white; /* 白色文字 */
            border: none;
            border-radius: 5px; /* 圆角 */
            cursor: pointer; /* 鼠标手形 */
            font-size: 16px; /* 字体大小 */
            transition: background-color 0.3s; /* 过渡效果 */
        }

        #logoutButton:hover {
            background-color: #c0392b; /* 悬停时更深的红色 */
        }
    </style>
    <!-- 放大图片 -->
    <style>
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
            z-index: 1000;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .overlay img {
            max-width: 90%;
            max-height: 90%;
            border: 2px solid white;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
    </style>
    <!-- 查询按钮 -->
    <style>
        #searchForm, #countForm {
            background: white;
            width: 100%;
            max-width: 600px;
            margin: 50px auto;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
        }

        #searchForm label, #countForm label {
            margin-top: 10px;
            color: #333;
            font-weight: bold;
            font-size: 12px;
        }

        #searchForm input[type="text"], #countForm input[type="text"] {
            width: 100%;
            padding: 6px;
            margin-top: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 12px;
        }

        #searchForm button, #countForm button {
            margin-top: 15px;
        }
    </style>
</head>
<body>
<button id="hamburger">&#9776; Menu</button>
<button id="logoutButton" style="position: fixed; bottom: 10px; right: 10px;">退出</button>
<div id="sidebar">
    <ul>
        <li><a href="#" onclick="selectBill()">发票查询</a></li>
        <li><a href="#" onclick="countBill()">发票统计</a></li>
    </ul>
</div>
<div id="content">
    <h1>🌟 欢迎来到管理员的发票管理主页 🌟</h1>
    <div id="records" style="display: none;">
        <form id="searchForm">
            <label for="startDate">开始日期：</label>
            <input type="text" id="startDate" name="startDate" placeholder="选择开始日期">
            <br>
            <label for="endDate">结束日期：</label>
            <input type="text" id="endDate" name="endDate" placeholder="选择结束日期">
            <label for="itemName">购买物品名称：</label>
            <input type="text" id="itemName" name="itemName" placeholder="输入购买物品名称">
            <br>
            <label for="seller">卖方：</label>
            <input type="text" id="seller" name="seller" placeholder="输入卖方">
            <br>
            <label for="purchaser">买方：</label>
            <input type="text" id="purchaser" name="purchaser" placeholder="输入买方">
            <br>
            <label for="money">金额：</label>
            <input type="text" id="money" name="money" placeholder="输入金额">
            <br>
            <button type="button" id="searchButton">查询</button>
        </form>
        <div id="imageOverlay" class="overlay">
            <img id="overlayImage" src="" alt="放大图片">
        </div>
        <table id="BillRecords">
            <thead>
            <tr>
                <th>ID</th>
                <th>用户id</th>
                <th>日期</th>
                <th>图片</th>
                <th>购买物品名称</th>
                <th>卖方</th>
                <th>买方</th>
                <th>金额</th>
            </tr>
            </thead>
            <tbody>
            <!-- 动态插入的行 -->
            </tbody>
        </table>
    </div>
    <div id="count" style="display: none;">
        <form id="countForm">
            <label for="count-startDate">开始日期：</label>
            <input type="text" id="count-startDate" name="count-startDate" placeholder="选择开始日期">
            <label for="count-endDate">结束日期：</label>
            <input type="text" id="count-endDate" name="count-endDate" placeholder="选择结束日期">
            <label for="count-itemName">购买物品名称：</label>
            <input type="text" id="count-itemName" name="count-itemName" placeholder="输入购买物品名称">
            <label for="count-seller">卖方：</label>
            <input type="text" id="count-seller" name="count-seller" placeholder="输入卖方">
            <label for="count-purchaser">买方：</label>
            <input type="text" id="count-purchaser" name="count-purchaser" placeholder="输入买方">
            <label for="count-money">金额：</label>
            <input type="text" id="count-money" name="count-money" placeholder="输入金额">
            <button type="button" id="countButton">统计</button>
        </form>
        <div>
            <p id="totalRecords">总记录条数: 加载中...</p>
            <p id="totalAmount">金额总数: 加载中...</p>
        </div>
    </div>
    <script>
        $(function() {
            // 初始化开始日期选择器
            $("#count-startDate").datepicker({
                defaultDate: "+1w", // 默认日期为一周后
                changeMonth: true, // 允许切换月份
                numberOfMonths: 1, // 显示一个月
                onClose: function(selectedDate) {
                    // 设置结束日期的最小值为开始日期
                    $("#count-endDate").datepicker("option", "minDate", selectedDate);
                }
            });

            // 初始化结束日期选择器
            $("#count-endDate").datepicker({
                defaultDate: "+1w", // 默认日期为一周后
                changeMonth: true, // 允许切换月份
                numberOfMonths: 1, // 显示一个月
                onClose: function(selectedDate) {
                    // 设置开始日期的最大值为结束日期
                    $("#count-startDate").datepicker("option", "maxDate", selectedDate);
                }
            });

            // 当选择开始日期后，自动弹出结束日期选择器
            $("#count-startDate").datepicker("option", "onSelect", function(selectedDate) {
                $("#count-endDate").datepicker("option", "minDate", selectedDate);
                $("#count-endDate").datepicker("show");
            });
        });
    </script>
</div>

<script>
    document.getElementById('hamburger').addEventListener('click', function () {
        var sidebar = document.getElementById('sidebar');
        var content = document.getElementById('content');
        var isOpen = sidebar.classList.contains('active');
        if (isOpen) {
            sidebar.classList.remove('active');
            content.classList.remove('with-sidebar');
        } else {
            sidebar.classList.add('active');
            content.classList.add('with-sidebar');
        }
    });

    var recordsTableContainer = document.getElementById('records');
    var countTableContainer = document.getElementById('count');
    function selectBill() {
        recordsTableContainer.style.display ='block';
        countTableContainer.style.display = 'none';
    }
    function countBill() {
        recordsTableContainer.style.display ='none';
        countTableContainer.style.display = 'block';
    }
    document.addEventListener('DOMContentLoaded', () => {
        const searchButton = document.getElementById('searchButton');
        if (searchButton) {
            searchButton.addEventListener('click', fetchBillsWithFilters);
        } else {
            console.error("Search button not found. Please check the ID.");
        }
    });
    document.addEventListener('DOMContentLoaded', () => {
        const countButton = document.getElementById('countButton');
        if (countButton) {
            countButton.addEventListener('click', countBills);
        } else {
            console.error("count button not found. Please check the ID.");
        }
    });
    function fetchBillsWithFilters() {
        // 获取每个输入框的值
        const startDate = document.getElementById('startDate').value.trim();
        const endDate = document.getElementById('endDate').value.trim();
        const itemName = document.getElementById('itemName').value.trim();
        const seller = document.getElementById('seller').value.trim();
        const purchaser = document.getElementById('purchaser').value.trim();
        const money = document.getElementById('money').value.trim();

        // 构造请求体
        const requestBody = {
            startDate: startDate || null,
            endDate: endDate || null,
            itemName: itemName || null,
            seller: seller || null,
            purchaser: purchaser || null,
            money: money || null
        };

        // 发送请求
        fetch('/demo1/AdminBillRecordServlet', {
            method: 'POST', // 使用 POST 方法
            headers: {
                'Content-Type': 'application/json' // 设置请求头为 JSON
            },
            body: JSON.stringify(requestBody) // 将请求体转换为 JSON 字符串
        })
            .then(response => response.json())
            .then(data => {
                const recordsTableBody = document.getElementById('BillRecords').querySelector('tbody');
                recordsTableBody.innerHTML = ''; // 清空现有记录

                data.forEach(bill => {
                    const row = document.createElement('tr');

                    // 创建图片元素
                    const imgElement = document.createElement('img');
                    imgElement.src = bill.url; // 设置图片的 URL
                    imgElement.alt = "Invoice Image"; // 设置图片的描述
                    imgElement.style.maxWidth = "50px"; // 设置图片的最大宽度
                    imgElement.style.cursor = "pointer"; // 设置鼠标指针为手形

                    // 添加点击事件
                    imgElement.addEventListener('click', () => {
                        const overlay = document.getElementById('imageOverlay');
                        const overlayImage = document.getElementById('overlayImage');
                        overlayImage.src = bill.url; // 设置放大的图片
                        overlay.style.display = "flex"; // 显示图片
                    });

                    row.innerHTML = `
                    <td>${bill.id}</td>
                    <td>${bill.userId}</td>
                    <td>${bill.date}</td>
                    <td></td>
                    <td>${bill.itemName}</td>
                    <td>${bill.seller}</td>
                    <td>${bill.purchaser}</td>
                    <td>${bill.money}</td>
                `;

                    // 将图片元素插入到第4列（索引为3）
                    row.cells[3].appendChild(imgElement);
                    recordsTableBody.appendChild(row);
                });
            })
            .catch(error => {
                console.error('Error fetching bill records:', error);
            });
    }
    // 获取覆盖层
    const overlay = document.getElementById('imageOverlay');

    // 点击覆盖层外部时隐藏图片
    overlay.addEventListener('click', () => {
        overlay.style.display = "none";
    });
    function countBills() {
        // 获取每个输入框的值
        const startDate = document.getElementById('count-startDate').value.trim();
        const endDate = document.getElementById('count-endDate').value.trim();
        const itemName = document.getElementById('count-itemName').value.trim();
        const seller = document.getElementById('count-seller').value.trim();
        const purchaser = document.getElementById('count-purchaser').value.trim();
        const money = document.getElementById('count-money').value.trim();

        // 构造请求体
        const requestBody = {
            startDate: startDate || null,
            endDate: endDate || null,
            itemName: itemName || null,
            seller: seller || null,
            purchaser: purchaser || null,
            money: money || null
        };

        fetch('/demo1/AdminCountRecordServlet', {
            method: 'POST', // 使用 POST 方法
            headers: {
                'Content-Type': 'application/json' // 设置请求头为 JSON
            },
            body: JSON.stringify(requestBody) // 将请求体转换为 JSON 字符串
        })
            .then(response => response.json()) // 解析返回的 JSON 数据
            .then(data => {
                // 获取页面中的显示元素
                const totalRecordsElement = document.getElementById('totalRecords');
                const totalAmountElement = document.getElementById('totalAmount');

                // 显示总记录条数和金额总数
                totalRecordsElement.textContent = `总记录条数: ${data.total_records}`;
                totalAmountElement.textContent = `金额总数: ${data.total_amount}`;
            })
            .catch(error => {
                console.error('Error fetching bill records:', error);
            });
    }
    function logout() {
        // 发送请求到后端以清空session
        fetch('/demo1/ExistServlet', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            // 可以发送一个空的JSON对象或者什么都不发送
            body: JSON.stringify({}),
        })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    // 显示成功消息
                    alert(data.message); // 或者使用其他方式显示消息，比如在页面上显示
                    window.location.href = 'index.html'; // 重定向到登录页面或首页
                } else {
                    // 处理错误情况
                    alert(data.message);
                }
            })
            .catch(error => {
                console.error('Error logging out:', error);
            });
    }
    // 设置退出按钮的点击事件
    document.getElementById('logoutButton').addEventListener('click', logout);
</script>
</body>
</html>